/*
 * @Author: codeD
 * @Date: 2022-02-17 20:45:39
 * @LastEditors: codeD
 * @LastEditTime: 2022-02-17 22:14:17
 * @Description: file content
 * @FilePath: \wpt\src\components\Search\index.tsx
 */
import React from 'react'

import styles from './index.module.css'
import useEffectSearch from './effect'
import {SearchProps} from './type'
/**
 * @props
 *  - @defaultValue ? - 同defaultValue
 *  - @placeholder ? -同placeholder
 *  - @value ?  - 同value
 *  - @className ? - 同classname
 *  - @style ? - 同style
 *
 * @events
 *   -@onFocus ? 同onFocus
 *   -@onSearch ? 点击搜索或者回车的回调
 *   -@onChange ? 同onChange
 *   -@onCancel ? 点击取消按钮的回调
 *   -@onClearClick ? 点击小x的回调
 */
const Search = (props:SearchProps) => {
    
    const { values,
        handleChange,
        placeholder,
        handleCancelIconClick } = useEffectSearch(props)
    return (
        <div className={styles["search-wrap"]}>
            <div className={styles["input-wrap"]}>
                <div className={styles["icon-box"]}></div>
                <input
                    type="text"
                    // onFocus={this.handleInputFocus}
                    onChange={handleChange}
                    className={styles["input"]}
                     placeholder={placeholder}
                    value={values}
                />

                {values && <div
                    onClick={handleCancelIconClick}
                    className={styles["cancel-icon"]}
                >
                    x
                </div>}

            </div>

            <div className={styles["btn"]}>
                {values ? '搜索' : '取消'}
            </div>

        </div>
    )
}
export default Search